<template>
	<!-- 美文推荐 -->
	<view>
		<global-navgation title="美文推荐"></global-navgation>
		<view class="" style="width: 100%;">
				<view class="list1" v-for="(item,index) in lists">
					<image :src="item.cover_img" mode=""></image>
					<text class="text1">{{item.title}}</text>
					<view class="top">
						置顶
					</view>
					<text class="text2">来源：{{item.source}}</text>
				</view>
				
			</view>
		</view>
	</view>
</template>
<script>
	import globalNavgation from '../../components/globalNavgation.vue'
	export default {
		name: 'beautiful',
		components: {
			globalNavgation
		},
		data() {
			return {
				lists:[],
				tokens:""
			}
		},
		mounted() {
			// 初始化获取数据
			this.__initClassData()			
		},
		onLoad(){
			uni.getStorage({
			    key: 'token',
			    success:  res=> {
					this.tokens=res.data
					console.log('mmm',this.tokens)
			    }
			});
		},
		methods:{
			__initClassData() {
				this.$api.get({
					url: '/article/article/article_list',
					data:{token:this.tokens}
				}).then(res => {
						this.lists=res.data
						
						
						console.log(res.data)
					})
				},
		}
	}
</script>
<style>
	.list1{
		
		width: 100%;
		height: 206rpx;
		position: relative;
		
		background: #F7F7F7;
	}
	.list2{
		
		width: 100%;
		height: 206rpx;
		position: relative;
		
		background: #F7F7F7;
	}
	
	.list1 image{
		width: 192rpx;
		height: 150rpx;
		position: absolute;
		top:28rpx;
		right: 32rpx;
	}
	.list2 image{
		width: 192rpx;
		height: 150rpx;
		position: absolute;
		top:28rpx;
		right: 32rpx;
	}
	.list1 .text1{
		display: block;
		width: 470rpx;
		height: 100rpx;
		position: absolute;
		top: 28rpx;
		left: 32rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 500;
		font-size: 36rpx;
		line-height: 50rpx;		
		color: #000000;

	}
	.list2 .text1{
		display: block;
		width: 470rpx;
		height: 100rpx;
		position: absolute;
		top: 28rpx;
		left: 32rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 500;
		font-size: 36rpx;
		line-height: 50rpx;		
		color: #000000;
	
	}
	.list1 .top{
		width: 72rpx;
		height: 34rpx;
		border: 1px solid #3965FF;
		color: #3965FF;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 24rpx;
		line-height: 34rpx;
		text-align: center;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		position: absolute;
		left: 30rpx;
		bottom: 28rpx;
	}
	.list1 .text2{
		width: 230rpx;
		height: 34rpx;
		line-height: 34rpx;
		display: block;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.45);
		position: absolute;
		left: 116rpx;
		bottom: 28rpx;
	}
	.list2 .text2{
		width: 230rpx;
		height: 34rpx;
		line-height: 34rpx;
		display: block;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.45);
		position: absolute;
		left: 30rpx;
		bottom: 28rpx;
	}
	.list2{
		background: #FFFFFF;
		
		width: 100%;
		height: 206rpx;
		
	}
</style>
